<template>
  <div class="login">
    <div class="login-left-image">
        <img src="../../../images/WechatIMG647.png">
    </div>

    <div class="login-right-content">
        <header class="header">
            <img src="../../../images/WechatIMG1179.png" />
            <h3 class="title">珺易通2.0</h3>
        </header>

        <div class="login-btn-box">
            <button :class="['btn', 'login-btn-main', {'btn-info':currentIndex == 0} ]" @click="changeActive($event)" index="0">商家登录</button>
            <button :class="['btn', 'login-btn-main', {'btn-info':currentIndex == 1} ]" index="1"  @click="changeActive($event)">机构登录</button>
            <button :class="['btn', 'login-btn-main', {'btn-info':currentIndex == 2} ]" index="2"  @click="changeActive($event)">录入员登录</button>
        </div>

        <Row  class="login-model">
            <Col span="24">
                <div class="login-content" style="border: 1px solid transparent">
                    <Form @submit.native.prevent="handleSubmit" ref="formItem" :model="formItem" :rules="FromRule" >
                        <FormItem prop="account" >
                            <Input :disabled="isValidate" v-model.trim="formItem.account"  icon="ios-contact" type="text" placeholder="用户名" />
                        </FormItem>
                            <FormItem prop="password">
                                <Input icon="ios-lock" :disabled="isValidate" v-model.trim="formItem.password" type="password" placeholder="密码" />
                                <Checkbox :disabled="isValidate" v-model="formItem.agree" style="float: left">记住密码</Checkbox><br>
                            </FormItem>
                        <FormItem>
                            <div class="bottom-btn-box">
                                <Button  :loading="isSubmit"  :disabled="isValidate" html-type="submit" type="primary" class="risk-login">
                                    <Icon type="ios-checkmark" />
                                    {{isValidate ? '登录验证中':'立即登录'}}
                                </Button>
                                <Button html-type="submit" type="default" class="risk-login" v-show="currentIndex <= 1">
                                    {{'忘记密码'}}
                                </Button>
                            </div>
                        </FormItem>
                        <FormItem>
                            <!--<div class="bottom-btn-box1">-->
                                <!--<Button html-type="submit" type="warning" class="risk-login"  v-show="currentIndex == 0">-->
                                    <!--{{'H5录入白名单'}}-->
                                <!--</Button>-->
                            <!--</div>-->
                        </FormItem>
                    </Form>
                </div>
            </Col>
        </Row>
        <!-- -->

    </div>


  </div>
</template>
<script>
  import md5 from 'js-md5';
  import $ from 'jquery'
  import { post } from '@/libs/axios-cfg'
  export default {
        data () {
            return {
                isSubmit:false,

                formItem: {
                    agree:'',
                    account:'',
                    password:'',
                    validateCode:''
                },
                isValidate:false,
                FromRule:{
                    account:[
                        { required: true, message: '账号不能为空' }
                    ],
                    password:[
                        {required: true, message: '请填写密码', },
                        { type: 'string',min:5, message: '密码长度不能小于6位',  }
                    ]
                },
                currentIndex:0
            }
        },
        methods: {
            changeActive(e){
                // console.log(e)
                // console.log($)
                this.currentIndex = $(e.currentTarget).attr('index')
                // console.log()
            },
            handleSubmit() {
                if(this.isValidate){
                    return false;
                }
                this.$refs.formItem.validate((valid) => {
                    if (valid) {
                        this.login()
                    }
                });
            },
            //async login(){
           async login(){
                this.isValidate = true;
                const loadings = this.$Message.loading({
                    content: '用户信息验证中...',
                    duration: 0
                });

                try {
                    let res = await post('/user/login',{
                        userName: this.formItem.account,
                        pwd: this.formItem.password,
                        type:0
                    })
                    console.log('res',res)
                    this.$Message.success("登录成功");
                    localStorage.setItem('csrf-token', res.data);
                    localStorage.setItem('user', this.formItem.account);
                    localStorage.setItem('password', md5(md5(this.formItem.password)));
                    //localStorage.setItem('baseURL','http://121.43.161.213:18080')
                    this.$store.commit('setAvator', '');
                    this.$router.push({
                        name: 'home_index'

                    });
                } catch (error) {
                    this.$throw(error)
                }
                setTimeout(loadings, 0);
                this.isValidate = false;
            }
        }
    }
</script>

<style>
body{
    background:#fff;
    height: 100%;

  }
.risk-login{
    width: 100%;
}
.login-model{
    box-sizing:border-box;
    margin-top : 15px ;

}
*{
    outline:none;
}

</style>

<style lang="scss" scoped>
$color :  #d5e3ef;
.login{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:auto;
    display:flex;
    align-items : center;
    justify-content : center;
    transform:translate(-50%,-50%);

    .header{
        width:100%;
        display:flex;
        align-items:center;
        color:#478fca;
        img{
            width:54px;
        }
        .title{
            margin-left:10px;
            font-size: 19px;

        }
    }
    .login-btn-box{
        width:100%;
        display:flex;
        padding-bottom:5px;
        border-bottom:1px solid #d5e3ef;
        // border-bottom-color: #d5e3ef;
        .login-btn-main{
            // padding:12px;
            padding: 6px 12px;
            font-size: 14px;
            color:#fff;
            background:#abbac3;
            border-color: #abbac3;
            border-width:5px;
            margin: 10px 5px;
            // max-width:110px;
            cursor:pointer;
            &:hover{
                background:#8b9aa3 ;
                // cursor:pointer;
            }
        }
        .btn-info{
            background-color: #6fb3e0;
            border-color: #6fb3e0;
            &:hover{
                background-color: #4f99c6 ;
                border-color: #6fb3e0;

            }
        }

    }
    .login-right-content{
        width:400px;
        box-sizing:border-box;
        padding-left:85px;
    }
    $width:300px;
    .bottom-btn-box{
        width:100%;
        position:relative;
        box-sizing:border-box;
        display:flex;
        justify-content : space-between;
        button{

            width:$width/2;
            // margin:0 10px;
            box-sizing:border-box;
            // margin-left:0;
        }
    }
    .bottom-btn-box1{
        width:100%;
        height:32px;
        position:relative;
        box-sizing:border-box;
        display:flex;
        justify-content : space-between;
        button{
            width:$width/2;
            // margin:0 10px;
        }
    }

}



</style>
